<template>
  <div class="box-container">
    <div class="header">注册页面</div>
    <div class="body">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model.number="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rpassword">
          <el-input
            type="password"
            v-model="ruleForm.rpassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submitForm"
            >注册</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
      <el-link type="primary" @click="handleToLogin">跳到登录页面</el-link>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/modules/user";
export default {
  name: "RegisterComp",
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      /* 密码验证的规则：
        1. 必填
        2. 密码长度必须大于 6 个字符
        3. 两次输入密码要一致

      */
      //  1. 必填
      if (value === "") {
        callback(new Error("请输入密码"));
        return;
      }
      if (value.length < 6) {
        callback(new Error("密码长度必须大于6"));
        return;
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
        return;
      }
      if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
        return;
      }
      callback();
    };
    return {
      loading: false,
      ruleForm: {
        username: "",
        password: "",
        rpassword: "",
        nickname: "",
      },
      rules: {
        /* 用户名的验证规则：
          1. 必填
          2. 用户名输入字符长度，必须大于6
         */
        username: [
          { required: true, message: "用户名是必填项", trigger: "blur" },
          { min: 6, message: "用户名必须大于6个字符", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        rpassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "用户昵称是必填项", trigger: "blur" },
          { min: 6, message: "用户昵称必须大于6个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleToLogin() {
      this.$emit("toggleComponet", "Login");
    },
    submitForm() {
      // 注：因为使用的是 <el-button > 其在 :loading 的时候，不会再次被触发  click 函数
      this.$refs.ruleForm.validate((valid) => {
        // valid 为 true，表示：表单验证成功，即每个 input 输入，均符合要求
        if (valid) {
          // 表单验证成功，进行 接口调用，将 表单数据，发送给后端
          this.loading = true;

          register(this.ruleForm)
            .then(() => {
              this.$message.success("注册成功，即将 为您跳转至登录页面！");

              // 注册成功后，2S 跳转到 Login “页面”
              setTimeout(() => {
                this.handleToLogin();
              }, 2000);
            })
            .catch((err) => {
              console.log("注册失败", err);
              this.$message.error("注册失败！");
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.box-container {
  width: 400px;
  height: 420px;
  background: white;
  padding: 0 20px;
  border-radius: 10px;
  .header {
    height: 60px;
    line-height: 60px;
  }

  .body > div {
    height: 40px;
    margin-bottom: 30px;
  }

  .body > .login {
    background-color: #448ef7;
    color: white;
    user-select: none;
    cursor: pointer;
  }
  .body > .login:hover {
    opacity: 0.9;
  }
}
</style>
